<template>
	<view class="mine-back">
		<top-heigth :backTitle="backTitle"></top-heigth>
		
		<view class="content-box">
			<view class="top-head-box">
				<view class="head-box">
					<view class="head">
							<image :src="userInfo.userSex==0 ? '/static/image/photo_gril.png' : '/static/image/mine-head.png'"></image>
						
					</view>
					{{userInfo.userName}}
				</view>
				
			</view>
			<uv-modal ref="modal" title="" align="center"
				showCancelButton @confirm="confirm">
				<view class="nc">
					昵称：<uv-input placeholder="请输入昵称" border="bottom" v-model="userInfo.userName"></uv-input>
				</view>
			</uv-modal>
			
			<uv-modal ref="sex" title="请选择性别" align="center"
				showCancelButton @confirm="confirm2">
				<uv-radio-group v-model="userInfo.userSex">
					<uv-radio 
						:customStyle="{margin: '8px'}" 
						v-for="(item, index) in radiolist" 
						:key="index" 
						:label="item.label"
						:name="item.name"
						>
					</uv-radio>
				</uv-radio-group>
			</uv-modal>
			
			<view class="content-box mine-font">
				<view>
					<view class="list">
						<view class="list-l">昵称</view>
						<view class="list-r" @click="openModal()">
							<view class="list-r-font">
								<view v-if="userInfo.userName == null">昵称</view>
								<view v-if="userInfo.userName != null" >{{userInfo.userName}}</view>
							</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="list-l">性别</view>
						<view class="list-r" @click="openSex()">
							<view v-if="userInfo.userSex == 1" class="list-r-font">男</view>
							<view v-else class="list-r-font">女</view>
							<view v-if="userInfo.userSex == null" class="list-r-font">请选择性别</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="list-l">所在城市</view>
						<view class="list-r" @click="openAddress">
							<view class="list-r-font">{{userInfo.userAddress}}</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
					<view class="list">
						<view class="list-l">手机号</view>
						<view class="list-r" @click="goPhone()">
							<view v-if="userInfo.userMobile == null" class="list-r-font">请填写手机号</view>
							<view v-if="userInfo.userMobile != null" class="list-r-font">{{userInfo.userMobileEx}}</view>
							<image class="go" src="/static/image/more.png"></image>
						</view>
					</view>
				</view>
			</view>
			<uv-picker ref="picker" :columns="addressList" @change="change" keyName="name" @confirm="confirmRegion"></uv-picker>

		</view>
		
		<view style="margin: 0 50rpx;">
			<view class="logout-but" @click="logout">退出登录</view>
		</view>
		<view style="margin: 0 50rpx;">
			<view class="logout-but-delete" @click="logoutdelete">注销用户</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import { checkLogin } from "@/util/checkLogin.js"
	import region from "./regions.json";
	import config from '@/common/config'
	
	
	export default {
		data() {
			return {
				backTitle: "个人中心",
				userInfo: {
					userName: null,
					userSex: null,
					userAddress: ""
				},
				radiolist: [{
					name: 1,
					label: '先生'
				}, {
					name: 0,
					label: '女士'
				}],
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				defaultValue: [3442, 1, 2]
			}
		},
		components: { TopHeigth },
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		created() {
			checkLogin((res) => {
				this.userInfo = res
				if(this.userInfo.userMobile && this.userInfo.userMobile.length == 11){
					this.userInfo.userMobileEx = this.userInfo.userMobile[0] + this.userInfo.userMobile[1] + this.userInfo.userMobile[2] + "****" + this.userInfo.userMobile[7] + this.userInfo.userMobile[8] + this.userInfo.userMobile[9] + this.userInfo.userMobile[10]
				}
			})
			this.provinces = region.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
			this.handlePickValueDefault()
		},
		methods: {
			logout(){
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗?',
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('token', "");
							uni.navigateBack()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			logoutdelete(){
				uni.showModal({
					title: '提示',
					content: '确定注销用户吗?',
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('token', "");
							uni.navigateBack()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			openModal() {
				// this.$refs.modal.open();
			},
			openSex() {
				this.$refs.sex.open();
			},
			confirm() {
				checkLogin((res) => {
					uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/updateTAppUser',{
							id:res.id,
							version:res.version,
							userName:this.userInfo.userName,
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						
					}) 
				})
				
			},
			confirm2() { //性别
				checkLogin((res) => {
					uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/updateTAppUser',{
							id:res.id,
							version:res.version,
							userSex:this.userInfo.userSex,
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: res.message
						})
						
					}) 
				})
			},
			goPhone(){
				uni.navigateTo({
					url: "/pages/mine/phone"
				})
			},
			openAddress() {
				this.$refs.picker.open();
				// this.handlePickValueDefault()
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$nextTick(() => {
					this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
				})
			},
			change(e) {
				if (this.loading) return;
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs,true)
				}
			},
			confirmRegion(e){
				let userAddress = e.value[0].name + '-' + e.value[1].name + '-' + e.value[2].name;
				this.userInfo.userAddress = userAddress
				checkLogin((res) => {
					uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/updateTAppUser',{
							id:res.id,
							version:res.version,
							userAddress: userAddress,
					}).then((res) => {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
						
					}) 
				})
				
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				await this.uploadFilePromise(event.file.url)
			},
			uploadFilePromise(url) {
				var _this = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + "/api/system/loginController/uploadImage?accessKey=buma_admin&sign=e97ece2e8fc18f588ddae8f31a30d972", // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							_this.userInfo.userCover = JSON.parse(res.data).data
							checkLogin((res) => {
								uni.$u.http.post('/api/shop/v1_0/tAppUserRCA/updateTAppUser',{
										id:res.id,
										version:res.version,
										userCover: _this.userInfo.userCover,
								}).then((res) => {
									uni.showToast({
										icon: "none",
										title: res.message
									})
									
								}) 
							})
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	.top-head-box{
		@include flex;
		align-items: center;
		justify-content:space-between;
		height: 200rpx;
		margin-top: 100rpx
		
	}
	.head-box{
		@include flex;
		align-items: center;
		justify-content:flex-start;
		width: 50%;
	}
	.head-box .head{
		width:116rpx;
		height: 116rpx;
		border-radius: 100rpx;
		overflow: hidden;
		text-align: center;
		font-size: 32rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.2);
		
		margin-right: 24rpx;
		background: #fff;
	}
	.head{
		border: 4rpx solid #fff;
	}
	.head image{
		width:116rpx;
		height: 116rpx;
	}
	
	
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.1);
		font-size: 28rpx;
		color: #02091A;
		margin-top: 24rpx;
		.list{
			@include flex;
			align-items: center;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				@include flex;
				align-items: center;
				justify-content:flex-start;
			}
			.list-r{
				@include flex;
				align-items: center;
				justify-content:flex-end;
				.list-r-font{
					margin-right: 16rpx;
				}
			}
		}
		.list:last-child{
			border-bottom:none;
		}
	}
	.nc{
		@include flex;
		align-items: center;
		justify-content:flex-start;
	}
</style>
